<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(items,index) in navs" :key="index">
          <el-breadcrumb-item :to="items.path?items.path:'/'" >{{items.name}}</el-breadcrumb-item>
      </template>
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'



export default defineComponent({
  name: 'AppNav',
  components: {
  },
  data(){
    return {
      navs: []
    }
  },

  methods:{
    fetchData() {
        const list = this.$route.matched as any;
        // console.log("list",list);
        this.navs = list;

    }
  },

  watch:{
    '$route': function(old:any,n:any){
      // console.log("on route watched",old,n)
          this.fetchData();
    }
  },



  mounted(){
    // console.log("on mounted MainPage 11")
  },

  created(){
    this.fetchData();
  },

  setup(){
    return{
    }
  }
})
</script>

<style scoped lang="scss">
</style>
